<template>
	<uni-drawer ref="showRightRef" :width="350" mode="right" :mask-click="true">
		<view class="navbar-block"></view>
		<scroll-view class="navbar-block-scroll" scroll-y="true">
			<uv-index-list :index-list="state.indexList">
				<template v-for="(item, index) in state.dataList">
					<uv-index-item>
						<uv-index-anchor :text="state.indexList[index]" bgColor="#fbfbfd"></uv-index-anchor>
						<view class="list-cell ss-flex" v-for="(cell, index) in item" @click="showCarDrawer(cell)">
							<image class="cell-icon" :src="cell.logo"></image>
							<view class="cell-name">{{cell.name}}</view>
						</view>
					</uv-index-item>
				</template>
			</uv-index-list>
		</scroll-view>
	</uni-drawer>
	
	<!-- 车辆 -->
	<uni-drawer ref="showCarRef" :width="350" mode="right" :mask-click="true">
		<view class="navbar-block"></view>
		<scroll-view class="navbar-block-scroll" scroll-y="true">
			<view class="car-list">
				<s-car-item isPk v-for="item in state.carList" :item="item" @select="showCarItemDrawer"></s-car-item>
			</view>
		</scroll-view>
	</uni-drawer>
	
	<!-- 车型 -->
	<uni-drawer ref="showCarItemRef" :width="350" mode="right" :mask-click="true">
		<view class="navbar-block"></view>
		<scroll-view class="navbar-block-scroll" scroll-y="true">
			<view class="car-list">
				<view class="car-item" v-for="item in state.carItemList" @click="selectCar(item)">{{item.name}}</view>
			</view>
		</scroll-view>
	</uni-drawer>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import sheep from '@/sheep';
	import _ from 'lodash';
		
	// 选择pk车辆
	const showRightRef = ref(null)
	function showDrawer() {
		getCar()
		showRightRef.value.open();
	}
	function closeDrawer() {
		showRightRef.value.close();
	}
	
	const state = reactive({
		indexList: [],
		dataList: [],
		carList: [],
		carItemList: []
	})
	// 获取品牌
	async function getCar(page = 1, list_rows = 9999) {
		const res = await sheep.$api.car.carIndex({
			list_rows,
			page,
			order: 1
		})
		state.indexList = _.uniq(res.data.data.map(item => item.initial))
		state.dataList = state.indexList.map(i => {
			return res.data.data.filter(item => item.initial == i)
		})
	}
	// 获取车辆
	async function getCarList(car_brand_id, page = 1, list_rows = 999) {
		const res = await sheep.$api.car.carData({
			car_brand_id,
			list_rows,
			page,
		})
		if (res.code === 1) {
			state.carList = res.data.data
		}
	}
	
	
	defineExpose({
		showDrawer,
		closeDrawer
	})
	
	// 选择车辆
	const showCarRef = ref(null)
	function showCarDrawer(item) {
		getCarList(item.id)
		showCarRef.value.open();
	}
	function closeCarDrawer() {
		showCarRef.value.close();
	}
	
	
	// 获取车型
	async function getCarItemList(id) {
		const res = await sheep.$api.car.carSku({type: 1, ids: id})
		if (res.code === 1) {
			state.carItemList = res.data.data
		}
	}
	
	// 选择车型
	const showCarItemRef = ref(null)
	function showCarItemDrawer(item) {
		getCarItemList(item.one_id)
		showCarItemRef.value.open();
	}
	function closeCarItemDrawer() {
		showCarItemRef.value.close();
	}
	
	const emits = defineEmits(['select'])
	function selectCar(item) {
		closeCarDrawer()
		closeDrawer()
		closeCarItemDrawer()
		emits('select', item)
	}
</script>

<style lang="scss" scoped>
	.navbar-block {
		height: 44px;
	}
	.navbar-block-scroll {
		height: calc(100% - 44px);
	}
	.list-cell {
		background-color: #fff;
		padding: 10rpx 30rpx;
		border-bottom: 1rpx solid #e5e5e5;
		
		.cell-icon {
			width: 80rpx;
			height: 80rpx;
		}
		.cell-name {
			margin-left: 20rpx;
		}
	}
	
	.car-item {
		padding: 20rpx;
		border-bottom: 1rpx solid #e5e5e5;
	}
</style>